<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        table{
            width: 600px;
            border-collapse: collapse;
        }
        td,th{
            border: 1px solid #cccccc;
            padding: 3px 5px;
            text-align: center;
        }
        td img{
            width: 110px;
            height: 110px;
        }
        input{
            width: 40px;
            text-align: center;
            outline: none;
        }
        div{
            width: 600px;
            padding: 10px;
            box-sizing: border-box;
            text-align: right;
        }
    </style>
</head>
<body>
    <script>
        //封装一个创建元素的方法
        function c(val){
            return document.createElement(val)
        }

        // 定义商品数组
        let goods = [
            {
                name:'小米手机',
                img:'https://img.alicdn.com/bao/uploaded/i3/2024314280/O1CN01xvm4Vd1hUHmuR3nvv_!!2024314280.jpg',
                count:2,
                price:2800
            },
            {
                name:'华为手机',
                img:'https://img.alicdn.com/bao/uploaded/i4/2215302589/O1CN01OkpR4U1Uzo2EC9mw9_!!0-item_pic.jpg',
                count:1,
                price:3999
            },
            {
                name:'苹果手机',
                img:'https://img.alicdn.com/bao/uploaded/i3/713805254/O1CN01JOIWVL1ogNYryq8TV_!!713805254.jpg',
                count:4,
                price:8800
            },
            {
                name:'三星手机',
                img:'https://img.alicdn.com/bao/uploaded/i4/1902393607/O1CN01EgdLlC1cW3ExhZpHD_!!1902393607.jpg',
                count:3,
                price:4800
            }
        ]

        // 表格的表头数组
        let headers = ['名称','图片','单价','数量','小计','操作']     
        //创建一个表格
        let table = c("table")
        //创建第一行
        let tr1 = c("tr")
        //创建第一行的所有表头
        headers.forEach(function(item){
            //循环几次，就创建几个表头
            let th = c("th")
            th.innerHTML = item
            //将表头添加到第一行
            tr1.appendChild(th)
        })
        //将第一行添加到表格
        table.appendChild(tr1)

        //循环商品数组，生成表格的其他行
        goods.forEach(function(item){
            //每个商品，创建一个行
            let tr2 = c("tr")
            //创建行里面的列
            let td1 = c("td")
            td1.innerHTML = item.name
            let td2 = c("td")
            let img = c("img")
            img.src = item.img
            td2.appendChild(img)
            let td3 = c("td")
            td3.innerHTML = item.price

            //第四列
            let td4 = c("td")
            //减按钮
            let btn1 = c("button")
            btn1.innerHTML = "-"
            btn1.onclick = function(){
                let v = item.count
                if(--v<1){
                    v = 1
                }
                item.count = v
                input.value = v
                td5.innerHTML = item.count * item.price
                div.innerHTML = "总计："+ calcSum()
            }
            td4.appendChild(btn1)
            //文本框
            let input = c("input")
            input.value = item.count
            // oninput是输入内容事件
            input.oninput = function(){
                let v = this.value
                if(!v){
                    v = 1
                }
                if(isNaN(v)){
                    v = 1
                }
                if(v<=0){
                    v = 1
                }
                v = parseInt(v)
                item.count = v
                this.value = v
                td5.innerHTML = item.count * item.price
                div.innerHTML = "总计："+ calcSum()
            }
            td4.appendChild(input)
            //加按钮
            let btn2 = c("button")
            btn2.innerHTML = "+"
            btn2.onclick = function(){
                let v = item.count
                v++
                item.count = v
                input.value = v
                td5.innerHTML = item.count * item.price
                div.innerHTML = "总计："+ calcSum()
            }
            td4.appendChild(btn2)

            let td5 = c("td")
            td5.innerHTML = item.count * item.price
            let td6 = c("td")
            td6.innerHTML = "删除"
            //删除列注册点击事件
            td6.onclick = function(){
                //删除当前行的数据
                let index = goods.findIndex(function(item){
                    return item.name===td1.innerHTML
                })
                goods.splice(index,1)  //删除数组中指定位置的商品数据
                //删除当前行
                tr2.remove()   
                div.innerHTML = "总计："+ calcSum()
            }
            //将列添加到行里面
            tr2.appendChild(td1)
            tr2.appendChild(td2)
            tr2.appendChild(td3)
            tr2.appendChild(td4)
            tr2.appendChild(td5)
            tr2.appendChild(td6)

            //将行添加到表格中
            table.appendChild(tr2)
        })
        //将表格添加到body中
        document.body.appendChild(table)

        //计算总计的方法
        function calcSum(){
            //定义总计
            let sum = 0 
            goods.forEach(function(item){
                sum += item.count * item.price
            })
            return sum
        }
        //创建一个div显示总计
        let div = c("div")
        div.innerHTML = "总计："+ calcSum()
        document.body.append(div)
    </script>
</body>
</html>